<template>
  <div>
    <el-row style="margin-top:10px;background:#FFFFFF">
      <el-row style="padding:10px">
        <el-col :span="16">
          <el-input v-model="mSearchName" placeholder="姓名" style="width:30%"></el-input>
          <el-button
            type="success"
            plain
            icon="el-icon-search"
            style="margin-left:10px"
            @click="page=1;getDrivers()"
          ></el-button>
        </el-col>
        <el-col :span="8">
          <el-button
            type="primary"
            plain
            style="float:left;margin-left:10px;float:right"
            @click="mAddRowDialog=true;mSelectRow={}"
          >添加司机</el-button>

          <el-button
            type="success"
            plain
            icon="el-icon-refresh-right"
            style="float:right;"
            @click="page=1;getDrivers()"
          ></el-button>
        </el-col>
      </el-row>
      <el-table
        :data="mDrivers"
        v-loading="mTableLoading"
        border
        style="width: 100%;margin-top:10px"
      >
        <el-table-column label="编号" prop="userId"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="身份证" prop="IDCARD"></el-table-column>
        <el-table-column label="证件类型" prop="driverCardType"></el-table-column>
        <el-table-column label="手机" prop="tel"></el-table-column>
        <el-table-column label="籍贯" prop></el-table-column>
        <el-table-column label="家庭住址" prop></el-table-column>
        <el-table-column label="状态" prop="strStatus"></el-table-column>
        <!-- <el-table-column label="所属公司" prop="companyName"></el-table-column> -->
        <el-table-column label="操作" width="360">
          <template slot-scope="scope">
            <el-button @click="mSelectRow=scope.row;mMdfyRowDialog=true" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:10px;padding-bottom:10px">
        <el-pagination
          style="float:right"
          v-if="totalPage"
          background
          layout="prev, pager, next"
          @current-change="pageIndexChange()"
          :current-page.sync="page"
          :page-count="totalPage"
        ></el-pagination>
      </el-row>
    </el-row>

    <!-- 分页 -->

    <!-- 重要对话框 -->
    <!-- 修改一行信息 -->
    <el-dialog title="编辑司机" :visible.sync="mMdfyRowDialog" width="30%">
      <el-input placeholder="请输入姓名" v-model="mSelectRow.name">
        <template slot="prepend">姓名</template>
      </el-input>
      <el-input placeholder="请输入电话" v-model="mSelectRow.tel" style="margin-top:10px">
        <template slot="prepend">电话</template>
      </el-input>

      <el-radio-group v-model="mSelectRow.userStatus" style="margin-top:20px">
        <el-radio label="normal">正常</el-radio>
        <el-radio label="disable">禁用</el-radio>
      </el-radio-group>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mMdfycarDialog = false">取 消</el-button>
        <el-button type="primary" @click="mdfyRow()">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 添加一行信息 -->
    <el-dialog title="添加司机" :visible.sync="mAddRowDialog" width="30%">
      <el-input placeholder="请输入姓名" v-model="mSelectRow.name">
        <template slot="prepend">姓名</template>
      </el-input>
      <el-input placeholder="请输入电话" v-model="mSelectRow.tel" style="margin-top:10px">
        <template slot="prepend">电话</template>
      </el-input>

      <el-upload
        style="margin-top:10px"
        class="avatar-uploader"
        :action="mFileHost"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mAddRowDialog = false">取 消</el-button>
        <el-button type="primary" @click="addRow()">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<style >
.topHeader {
  height: 40px;
  max-height: 40px;
  border-bottom: solid;
  border-width: 1px;
  border-color: #dcdfe6;
}
.leftMenu {
  /* position: absolute; */
  top: 0;
  left: 0;
  min-height: 100%;
  height: auto;
}
.height100 {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>



<script>
import {
  getRequestHeader,
  loginApi,
  getThirdCompanyApi,
  updateUserApi,
  addUserApi
} from "../api/user.js";
import {
  getNowFormatDate,
  getWeekToday,
  isBlankApi,
  logxApi
} from "../api/util.js";
import { updateCarApi, addCarApi } from "../api/car.js";
import { uploadFileApi } from "../api/storage.js";
import {
  queryControllerOrdersApi,
  getDriversApi,
  getCarsApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi
} from "../api/order.js";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      mTableData: [],
      page: 1,
      totalPage: 0,
      pagesize: 12,
      mTableLoading: false,
      mDispatchDialog: false,
      mSelectRow: {},
      mThirdDispatchDialog: false,
      mCdmMap: [],
      mDrivers: [],
      mCars: [],
      mThridCompany: [],
      mCloseDialog: false,
      mMdfyRowDialog: false,
      mAddRowDialog: false,
      imageUrl: "",
      mFileHost: undefined,
      mSearchName: undefined
    };
  },
  created() {
    this.mFileHost = getRequestHeader().fileHost;
  },
  mounted() {
    this.getDrivers();
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    pageIndexChange() {
      this.getDrivers();
    },
    getDrivers() {
      var that = this;
      that.mTableLoading = true;
      getDriversApi(
        that.page,
        that.pagesize,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            // that.mCars = data;
            that.page = data.currentPage;
            that.totalPage = data.totalPage;
            that.mDrivers = that.refreshDrivers(data.list);
            that.mTableLoading = false;
          };
          this.fail = function(msg) {
            that.mTableLoading = false;
            that.mDrivers = [];
          };
        })()
      );
    },
    refreshDrivers(lst) {
      var that = this;
      var result = [];
      lst.forEach(element => {
        if (element.userStatus == "normal") {
          element.strStatus = "正常";
        } else if (element.carStatus == "disable") {
          element.strStatus = "不可用";
        } else {
          element.strStatus = "未知";
        }
        result.push(element);
      });
      console.log(JSON.stringify(result, null, 2));
      return result;
    },
    mdfyRow() {
      var that = this;
      var row = this.mSelectRow;
      if (
        !row ||
        isBlankApi(row.userId) ||
        isBlankApi(row.name) ||
        isBlankApi(row.tel) ||
        isBlankApi(row.userStatus)
      ) {
        this.$message.error("请填完整司机信息");
        return;
      }
      this.showFullLoading();
      updateUserApi(
        row.userId,
        row.name,
        row.tel,
        row.userStatus,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mMdfyRowDialog = false;
            that.getDrivers();
          };
        })()
      );
    },
    addRow() {
      var that = this;
      var row = this.mSelectRow;
      if (!row || isBlankApi(row.name) || isBlankApi(row.tel)) {
        this.$message.error("请填完整司机信息");
        return;
      }
      this.showFullLoading();
      addUserApi(
        row.name,
        row.tel,
        ["driver", "user"],
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mAddRowDialog = false;
            that.getDrivers();
          };
        })()
      );
    },
    uploadFile() {
      console.log("上传文件了");
    },
    handleAvatarSuccess(res, file) {
      logxApi(res);
      // logxApi(file);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
    //----------over methods------
  }
};
</script>